<template>
  <div>
    <navbar></navbar>

    <div class="content" style="padding-top: 0px; margin-top: 4%">
      <section class="hero is-primary" style="height: 8%">
        <div class="hero-body">
          <div class="columns">
            <div class="column">
              <p class="title">朋友圈</p>
              <p class="subtitle">又有什么新动态？</p>
            </div>
            <div class="column">
              <div class="card" style="height:90%">
                <div class="card-content">
                  <chartLint2></chartLint2>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div class="columns" style="margin: 10px 10% 0px 10%">
        <div class="column">
          <div v-for="count in Math.ceil(total / 3)" :key="count">
            <vs-card>
              <template #title>
                <h3 @click="view(allData[(count - 1) * 3].gid)">
                  {{ allData[(count - 1) * 3].title.String }}
                </h3>
                <i
                  class="bx bx-tag"
                  v-for="tag in allData[(count - 1) * 3].tags"
                  :key="tag"
                  style="color: pink"
                >
                  {{ tag.name ? tag.name : tag }}
                </i>
              </template>
              <template #img>
                <img
                  v-lazy="allData[(count - 1) * 3].images[0]"
                  alt="Placeholder image"
                />
              </template>
              <template #text>
                <p style="padding: 0px 10px 15px 0px">
                  <br />
                  <time datetime="2016-1-1" style="float: right">
                    {{
                      allData[(count - 1) * 3].date.Time
                        | dateformat("MM月DD日")
                    }}
                  </time>
                </p>
              </template>
              <template #interactions>
                <vs-button danger icon>
                  <i class="bx bx-heart"></i>
                </vs-button>
                <vs-button
                  class="btn-chat"
                  shadow
                  primary
                  @click="zone(allData[(count - 1) * 3].userid)"
                >
                  <i class="bx bx-user"></i>
                  <span class="span">
                    {{ allData[(count - 1) * 3].username.String }}
                  </span>
                </vs-button>
              </template>
            </vs-card>
            <div style="padding: 5px"></div>
          </div>
        </div>
        <div class="column">
          <div v-for="count in Math.ceil(total / 3)" :key="count">
            <vs-card type="2">
              <template #title>
                <h3
                  @click="view(allData[(count - 1) * 3 + 1].gid)"
                  style="color: white"
                >
                  {{ allData[(count - 1) * 3 + 1].title.String }}
                </h3>
              </template>
              <template #img>
                <img
                  v-lazy="allData[(count - 1) * 3 + 1].images[0]"
                  alt="Placeholder image"
                />
              </template>
              <template #text>
                <p>
                  <i
                    class="bx bx-tag"
                    v-for="tag in allData[(count - 1) * 3 + 1].tags"
                    :key="tag"
                    style="color: pink"
                  >
                    {{ tag.name ? tag.name : tag }}
                  </i>
                  <br />
                  <time datetime="2016-1-1" style="float: right">
                    {{
                      allData[(count - 1) * 3 + 1].date.Time
                        | dateformat("MM月DD日")
                    }}
                  </time>
                </p>
              </template>
              <template #interactions>
                <vs-button danger icon>
                  <i class="bx bx-heart"></i>
                </vs-button>
                <vs-button
                  class="btn-chat"
                  shadow
                  primary
                  @click="zone(allData[(count - 1) * 3 + 1].userid)"
                >
                  <i class="bx bx-user"></i>
                  <span class="span">
                    {{ allData[(count - 1) * 3 + 1].username.String }}
                  </span>
                </vs-button>
              </template>
            </vs-card>
            <div style="padding: 20px"></div>
            <hr />
            <div style="padding: 20px"></div>
          </div>
        </div>
        <div class="column">
          <div v-for="count in Math.ceil(total / 3)" :key="count">
            <vs-card type="5">
              <template #title>
                <h3 @click="view(allData[(count - 1) * 3 + 2].gid)">
                  {{ allData[(count - 1) * 3 + 2].title.String }}
                </h3>
                <i
                  class="bx bx-tag"
                  v-for="tag in allData[(count - 1) * 3 + 2].tags"
                  :key="tag"
                  style="color: pink"
                >
                  {{ tag.name ? tag.name : tag }}
                </i>
              </template>
              <template #img>
                <img
                  v-lazy="allData[(count - 1) * 3 + 2].images[0]"
                  alt="Placeholder image"
                />
              </template>
              <template #text>
                <p>
                  <time datetime="2016-1-1" style="float: right">
                    {{
                      allData[(count - 1) * 3 + 2].date.Time
                        | dateformat("MM月DD日")
                    }}
                  </time>
                </p>
              </template>
              <template #interactions>
                <vs-button danger icon>
                  <i class="bx bx-heart"></i>
                </vs-button>
                <vs-button
                  class="btn-chat"
                  shadow
                  primary
                  @click="zone(allData[(count - 1) * 3 + 2].userid)"
                >
                  <i class="bx bx-user"></i>
                  <span class="span">
                    {{ allData[(count - 1) * 3 + 2].username.String }}
                  </span>
                </vs-button>
              </template>
            </vs-card>
            <hr />
            <div style="padding: 20px"></div>
          </div>
        </div>
      </div>
      <!-- <div style="padding: 50px">
      <div v-for="item in allData" :key="item">
        <div class="card">
          <div class="card-content">
            <div class="content">
              {{ item.username.String }}
              {{ item.title.String }}
              {{ item.date.Time }}
              {{ JSON.stringify(item) }}
            </div>
          </div>
        </div>
      </div>
      <div style="padding: 5px"></div>
    </div> -->
    </div>
  </div>
</template>

<script>
import navbar from "../components/common/navbar.vue";
import chartLint2 from "../components/userCom/chartLint2";
export default {
  data() {
    return {
      allData: [],
      total: 0,
    };
  },
  components: { navbar, chartLint2 },
  methods: {
    async zone(uid) {
      this.$router.push({
        path: "/zone",
        query: {
          uid: uid,
        },
      });
    },
    view(id) {
      this.$router.push({
        name: "Gallery",
        query: {
          gid: id,
        },
      });
    },
  },
  //查询朋友圈中应该显示的图片
  async beforeCreate() {
    let res = await this.$http.get("/go/sub/zoneAll", {
      headers: {
        pass: "",
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    });
    if (res.data.status != 20000) {
      this.$router.push("/AllGallery");
    }
    //console.log(res.data.data.sublist);
    this.allData = res.data.data;
    this.total = this.allData.length;
    console.log(this.allData);
    // sublist.push(res.data.data.uid);
    // let geted = {};
    // for (let i = 0; i < sublist.length; i++) {
    //   if (geted[sublist[i]] != null) {
    //     continue;
    //   }
    //   geted[sublist[i]] = true;
    //   let temp_data = await this.$http.get("/go/pic/getUser/" + sublist[i], {
    //     headers: {
    //       pass: "",
    //       Authorization: "Bearer " + (await localStorage.getItem("token")),
    //     },
    //   });
    //   // console.log(temp_data.data.data);
    //   this.allData = this.allData.concat(temp_data.data.data);
    // }
    // // this.articles = res.data.articles;
    // // this.articles.sort((a, b) => {
    // //   // console.log(a.raw.text.length - b.raw.text.length);
    // //   return a.raw.text.length - b.raw.text.length;
    // // });
    // await this.allData.sort((a, b) => {
    //   // console.log("ok");
    //   // console.log(Date(b.date.Time).getTime())
    //   // console.log(new Date(b.date.Time).getTime() - new Date(a.date.Time).getTime());
    //   return new Date(b.date.Time).getTime() - new Date(a.date.Time).getTime();
    // });
    // this.total = this.allData.length;
    // console.log(this.total);
    // console.log(this.allData);
  },
};
</script>
<style scoped>
.content {
  margin-top: 70px;
  margin-bottom: 20px;
  min-height: calc(100vh - 34px) !important;
  width: 100%;
}
</style>
<style>
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  display: block;
  background: #ffffff;
}

::-webkit-scrollbar-thumb {
  background: #303030;
  border-radius: 5px;
}
</style>
<style scoped>
.content {
  background: url("../assets/bg2.svg");
  background-size: cover;
  /* display: flex; */
  min-height: calc(100vh);
  overflow: hidden;
}
</style>